<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery 鼠标事件示例1</title>
		<style>
			div{
				width:300px;
				height:400px;
				text-align:center;
				float:left;
				margin:20px;
				border:1px solid;
			}
			img{
				width:200px;
				height:auto;
			}	
		</style> 
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>	
			$(document).ready(function(){		 
			 	//触发按钮1的鼠标单击事件
             	$("#btn01").click(function(){
					 $("#img01").attr("src","image/bulb_light.jpg");
			 	});
			 
			 	//触发按钮2的鼠标双击事件
				 $("#btn02").dblclick(function(){
					  $("#img02").attr("src","image/bulb_light.jpg");
			 	});
			 
			 	//触发灯泡3的鼠标悬浮事件	
				 $("#img03").hover(function(){
					  $("#img03").attr("src","image/bulb_light.jpg");
			 	}); 
			});
        </script>  
    </head>
    <body>
        <h3>jQuery 鼠标事件click()、dblclick()和hover()示例</h3>
        <hr>
		<div>
			<h4>灯泡1:click()事件测试</h4>
			<img id="img01" src="image/bulb_dark.jpg" />
			<br />
			<p><button id="btn01">单击此处开灯</button></p>	
		</div>	
		
		<div>
			<h4>灯泡2:dblclick()事件测试</h4>
			<img id="img02" src="image/bulb_dark.jpg" />
			<br />
			<p><button id="btn02">双击此处开灯</button></p>	
		</div>	
		
		<div>
			<h4>灯泡3:hover()事件测试</h4>
			<img id="img03" src="image/bulb_dark.jpg" />
			<br />
			<p>鼠标悬浮在灯泡上开灯</p>	
		</div>	
	</body>
</html>